<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- onclick="submit()"表示点击时 执行submit方法 -->
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="jquery.js"></script>

    <script>
        function submit(){
            let from = $("#from").val()
            let to =  $("#to").val()
            let say =$("#say").val()

            if(from ==""|| to=="" ||say==""){
                alert("请检查输入内容")
                return
            }
            $.ajax({
                type: "post",
                url: "/list/publish",
                contentType: "application/json",
                data: JSON.stringify({
                    from: from,
                    to: to,
                    say: say
                }),
                success: function(aaa){
                    if(aaa.ok == 1){
                        alert("添加成功")
                        // $("#document").append("<div>"+from+" 对 "+to+" 说: "+say+"</div>")
                        // $("")
                    }else{
                        alert("添加失败")
                    }
                }
            });
        }
    </script>
    <!-- <script>
        function submit() {
            $.ajax({
                type: "post",
                url: "/user/login",
                data: {
                    "userName": $("#userName").val(),
                    "password": $("#password").val()
                },//将数据前端的数据拿到放在data里,aaa表示后端返回的数据
                success: function(aaa){
                    if(aaa == true){
                        //跳转index页面
                        location.href="index.html";
                    }else{
                        //当前页面
                        alert("密码错误")
                    }
                }
            });
        }
    </script> -->
</body>

</html>